import { defineComponent } from 'vue';
import { organizeList, organizeScore } from '@/api/home';
import '../../../style/index.less';
import { ElDatePicker, ElDialog, ElTable, ElTableColumn } from 'element-plus';
import { dateFormat } from '@/utils';
export default defineComponent({
    name: 'ItemTable',
    props: ['data'],
    setup(props: any, { expose }) {
        const visible = ref(false)
        const data = reactive({
            month: new Date(),
            totalRow: [],
            list: [],
            loading: false,
            visible: false,
        }) as AnyObject;

        watch(() => visible.value, (visible) => {
            if (visible) {
                data.month = new Date();
                getData()
            }
        })
        const selectMonth = () => {
            getData()
        }
        function getData() {
            data.loading = true;
            organizeList(dateFormat(data.month.getTime(), "yyyy-MM")).then(res => {
                data.list = res.data.list;
                data.totalRow = ["合计", res.data.finish_rate, res.data.all_score]
            }).finally(() => {
                data.loading = false;
            })
        }
        expose({ visible: visible });
        return () => (
            <ElDialog
                lock-scroll
                draggable
                v-model={visible.value}
                title="绩效详情"
                style={{ maxWidth: '800px', with: 'auto' }}

            >
                <ElDatePicker
                    v-model={data.month}
                    type="month"
                    class="month_selector"
                    range-separator="-"
                    clearable={false}
                    // @ts-ignore
                    onChange={selectMonth}
                />
                <ElTable
                    v-loading={data.loading}
                    header-row-class-name="table_header"
                    size="small"
                    data={data.list}
                    show-summary
                    summary-method={() => data.totalRow}
                >
                    <ElTableColumn prop="title" label="考核项" />
                    <ElTableColumn prop="finish_rate" label="完成率" />
                    <ElTableColumn prop="total_score" label="得分" />
                </ElTable>
            </ElDialog>
        );
    }
});
